import React, { useEffect } from "react";
import { connect } from "react-redux";
import NavHeader from "../../components/NavHeader";
import BeScroll from "../../components/loading/index";
import { useHistory } from "react-router-dom";
import { Image, Loading, Tag } from "antd-mobile/2x";
import "./index.scss";
const colors = ["#87d068", "#108ee9", "#2db7f5"];
const MyRoom = (props: any) => {
  const { push } = useHistory();
  console.log(props);
  const { myRoomList } = props;
  useEffect(() => {
    if (!(myRoomList.length > 0)) {
      props.dispatch({
        type: "GETROOMLIST",
      });
    }
  }, [myRoomList]);

  return (
    <div className="myRoomListBox">
      <NavHeader>我发布的房源</NavHeader>
      <div style={{ height: "40px" }}></div>
      <div className="myRoomList">
        <BeScroll myClass="myRoom">
          <div>
            {myRoomList.length > 0 &&
              myRoomList.map((v: any, index: number) => {
                return (
                  <div
                    onClick={() => {
                      push({
                        pathname: "/details",
                        state: {
                          id: v.houseCode,
                        },
                      });
                    }}
                    className="roomList_item"
                    key={index}
                  >
                    <div className="item_img">
                      <Image
                        lazy
                        width={120}
                        height={100}
                        placeholder={<Loading />}
                        src={"http://47.102.145.189:8009" + v.houseImg}
                      />
                    </div>
                    <div className="item_content">
                      <h4>{v.title}</h4>
                      <p style={{ color: "#999", fontSize: "10px" }}>
                        {v.desc}
                      </p>
                      <p>
                        {v.tags.map((item: string, ind: number) => {
                          return (
                            <Tag
                              className="tagChild"
                              color={colors[ind]}
                              key={ind + "a"}
                            >
                              {item}
                            </Tag>
                          );
                        })}
                      </p>
                      <p>
                        <span>{v.price}</span>源/月
                      </p>
                    </div>
                  </div>
                );
              })}
          </div>
        </BeScroll>{" "}
      </div>
    </div>
  );
};
const mapStateToProps = (state: any) => {
  return state.user;
};
export default connect(mapStateToProps)(MyRoom);
